import { useTonConnectUI , TonConnectButton, useTonAddress } from "@tonconnect/ui-react";
import './Header.css'
import { useEffect, useState } from 'react'

import { Address, Cell, TonClient, beginCell, fromNano, toNano } from "@ton/ton";

export const Header = () => {
    const [tonConnectUI, setOptions] = useTonConnectUI();
    const [address, setAddress] = useState<string | null>(null);
    const userFriendlyAddress = useTonAddress();
    const rawAddress = useTonAddress(false);

    // 初始化TON客户端（测试网）
    const tonClient = new TonClient({
      endpoint: 'https://testnet.toncenter.com/api/v2/jsonRPC',
    })
    // console.log('tonClient----')
    // console.log(tonClient)
    // console.log('tonClient----')

    // 监听钱包连接
    tonConnectUI.onStatusChange((walletInfo) => {
      console.log('walletInfo----')
       console.log(walletInfo)
        if (walletInfo && walletInfo.account) {
            setAddress(walletInfo.account.address);
        }
    });

    return (
      <>
        <header>
          <span>TON Wallet</span>
          
          <TonConnectButton />
        </header>
        <div>
          {/* {address && <p>钱包地址: {address}</p>} */}
          <p>获取地址useTonAddress()-------------</p>
          <p>格式地址:{userFriendlyAddress}</p>
          <p>原地址:{rawAddress}</p>
          <button onClick={() => tonConnectUI.openModal()}>
            open Modal
          </button>
        </div>
      </>
      
    );
  };